import * as React from 'react';
//建立页面数据和store 的关联
import { connect } from 'react-redux'
import { Post, Get, Patch, Put } from '../../utils/utilHttp'
import { Link, RouteComponentProps } from 'react-router-dom';
import { Button, WhiteSpace, WingBlank,Toast } from 'antd-mobile';
import '../../utils/common.scss'
import './top.scss'

import  img001 from './img/001.svg'

interface IState {
  navIndex:number,
  selectValue:string,
  isLogin:boolean
}
interface IProps {
  history:any,
  setTopLabelAct:Function
  setIsLoginAct:Function
}
class Top extends React.Component<IProps, IState> {
  constructor(props:IProps){
    super(props);
  }
  state = {
    navIndex:(this.props as any).topLabel,//选中下标
    selectValue:'',//输入框的值
    isLogin:(this.props as any).isLogin,//是否登录
  }
  componentDidMount() {
    console.log('初始化头部,选中标签'+(this.props as any).topLabel)
  }
  //选择下标
  navOn=(navIndex:number)=>{
    let url=['/','/getstart','/api','/about','/me','/licode','/myredux','/myinfo','/testui','/myjs','/where','','/ts','/cart']
    this.setState({
      navIndex:navIndex
    },async ()=>{
      await this.props.setTopLabelAct(navIndex);
      this.props.history.push(url[navIndex])
    })
  }
  //输入
  onChange=(e:Eve)=>{
    console.log(e)
    this.setState({
      selectValue:e.target.value
    })
  }
  //监听回车
  onKeyUp=(e:Eve)=>{
    if (e.keyCode === 13) {
      let selectValue=this.state.selectValue;
      window.location.href = `http://www.baidu.com/s?wd=${selectValue}`;
    }
  }
  onLogin=()=>{
    setTimeout(() => {
      this.setState({
        isLogin:true
      },()=>{
        this.props.setIsLoginAct()
      })
    }, 1500);
    Toast.success('没有提供登录接口，无法获取token,登陆成功！', 1.5);
  }
  //跳转个人中心
  getUserInfo=()=>{
    this.props.history.push('/user');
  }
  render() {
    let {navIndex,selectValue,isLogin } =this.state;
    return (
      <div className='top mar_b_20'>
        <div className='clear clear20'></div>
        <div className='logo mar_b_30'>
          <img src={img001}/>
          {isLogin?(
            <div onClick={()=>{this.getUserInfo()}}>
              <i className='icon icon_LC_icon_user_fill_3 font_30'></i>
            </div>
          ):(
            <div onClick={()=>{this.onLogin()}}>
              <span>登录</span>
              <i>/</i>
              <span>注册</span>
            </div>
          )}
        </div>
        <div className='top_select'>
          <i className='icon font_30 icon_wxbsousuotuiguang'/>
          <input type='text' value={selectValue} className='top_select' onChange={(e)=>{this.onChange(e)}} onKeyUp={(e)=>{this.onKeyUp(e)}}/>
        </div>
        <div className='top_nav mar_t_40'>
          <button className={navIndex==0?'active':''} onTouchStart={()=>{this.navOn(0)}}>首页</button>
          <button className={navIndex==1?'active':''} onTouchStart={()=>{this.navOn(1)}}>新手入门</button>
          <button className={navIndex==2?'active':''} onTouchStart={()=>{this.navOn(2)}}>API</button>
          <button className={navIndex==3?'active':''} onTouchStart={()=>{this.navOn(3)}}>关于</button>
          <button className={navIndex==6?'active':''} onTouchStart={()=>{this.navOn(6)}}>重学redux</button>
          <button className={navIndex==5?'active':''} onTouchStart={()=>{this.navOn(5)}}>力扣</button>
          <button className={navIndex==4?'active':''} onTouchStart={()=>{this.navOn(4)}}>复习react</button>
          <button className={navIndex==7?'active':''} onTouchStart={()=>{this.navOn(7)}}>路由权限控制</button>
          <button className={navIndex==8?'active':''} onTouchStart={()=>{this.navOn(8)}}>测试封装UI组件</button>
          <button className={navIndex==9?'active':''} onTouchStart={()=>{this.navOn(9)}}>复习JS</button>
          <button className={navIndex==10?'active':''} onTouchStart={()=>{this.navOn(10)}}>去哪儿</button>
          <button className={navIndex==11?'active':''} onTouchStart={()=>{this.navOn(11)}}>实用代码封装(还没分离)</button>
          <button className={navIndex==12?'active':''} onTouchStart={()=>{this.navOn(12)}}>复习TS</button>
          <button className={navIndex==13?'active':''} onTouchStart={()=>{this.navOn(13)}}>Hook TS 购物车</button>
          
        </div>
      </div>
    )
  }
}


//将store里面的数据映射到props 这个数据
//就是取store的数据 然后操作 赋值给页面的变量
//将页面数据和全局数据绑定
const mapState = ({ store }: any) => {
  return ({
    isLogin: store.isLogin,
    topLabel:store.topLabel
  })
}

const mapDispatch = ({ store }: any) => ({
  // setPlayListAct(data:any){
  //   store.setPlayListAct(data)
  // },
  setTopLabelAct(data:number){
    store.setTopLabelAct(data);
  },
  setIsLoginAct(){
    store.setIsLoginAct();
  },
})
//返回了 connect 其实是一个容器组件
export default connect(mapState, mapDispatch)(Top); 
